<script setup lang="js">
	const isCollapse = defineModel('isCollapse')

	const onShowMenu = () => {
		isCollapse.value = !isCollapse.value
	}
</script>
<template>
	<div style="height: 100%">
		<el-menu class="side_menu" :router="true" default-active="/Home/Student" :collapse="isCollapse" :collapse-transition="false">
			<el-sub-menu index="1" style="background-color: transparent">
				<template #title>
					<el-icon><location /></el-icon>
					<span class="span_title">校园管理</span>
				</template>
				<el-menu-item index="/Home/Student">
					<span class="span_title">学生管理</span>
				</el-menu-item>
				<el-menu-item index="/Home/Department">
					<span class="span_title">系部管理</span>
				</el-menu-item>
				<el-menu-item index="/Home/Equip">
					<span class="span_title">设备管理</span>
				</el-menu-item>
				<el-menu-item index="/Home/Teacher">
					<span class="span_title">教师管理</span>
				</el-menu-item>
				<el-menu-item index="/Home/Account">
					<span class="span_title">账号管理</span>
				</el-menu-item>
				<el-menu-item index="/Home/EquipMaintenance">
					<span class="span_title">设备维修</span>
				</el-menu-item>
				<el-menu-item index="/Home/Reporting">
					<span class="span_title">设备报备</span>
				</el-menu-item>
				<el-menu-item index="/Home/TeacherAttender">
					<span class="span_title">出勤表</span>
				</el-menu-item>
			</el-sub-menu>
			<el-menu-item class="menu_buttom_item" @click="onShowMenu">
				<el-icon v-if="!isCollapse"><Back /></el-icon>
				<el-icon v-else><Right /></el-icon>
				<span class="span_title">收起</span>
			</el-menu-item>
		</el-menu>
	</div>
</template>
<style scoped lang="css">
	.menu_buttom_item {
		position: absolute;
		bottom: 0px;
		width: 100%;
	}
	.side_menu {
		--el-menu-bg-color: transparent;
		--el-menu-text-color: #409eff;
		--el-menu-active-color: #ffffff;
		border: 0;
		overflow: hidden;
		height: 100%;
	}
	.span_title {
		/* background-color: antiquewhite; */
	}
</style>
